<template>
	<view class="tab-page group">
		<nav-bar add search @add="onCreateNewGroup" @search="showSearch = !showSearch">群聊</nav-bar>
		<view class="add-popover" v-if="addPopoverShow">
			<view class="add-item" @click.stop="handleAdd(0)">
				普通群聊
			</view>
			<view class="add-item" @click.stop="handleAdd(1)">
				代理群聊
			</view>
		</view>
		<view class="nav-bar" v-if="showSearch" @click="addPopoverShow=false">
			<view class="nav-search">
				<uni-search-bar v-model="searchText" cancelButton="none" radius="100"
					placeholder="点击搜索群聊"></uni-search-bar>
			</view>
		</view>
		<view class="group-tip" v-if="groupStore.groups.length == 0" @click="addPopoverShow=false">
			温馨提示：您现在还没有加入任何群聊，点击右上方'+'按钮可以创建群聊哦~
		</view>
		<view class="group-items" v-else @click="addPopoverShow=false">
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<view v-for="group in groupStore.groups" :key="group.id">
					<group-item v-if="!group.quit && group.showGroupName.includes(searchText)"
						:group="group"></group-item>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSearch: false,
				searchText: "",
				addPopoverShow: false
			}
		},
		methods: {
			onFocusSearch() {

			},
			onCreateNewGroup() {
				this.addPopoverShow = true;
				// uni.navigateTo({
				// 	url: "/pages/group/group-edit"
				// })
			},
			handleAdd(type) {
				this.addPopoverShow = false;
				uni.navigateTo({
					url: "/pages/group/group-edit?addType=" + type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group {
		position: relative;
		display: flex;
		flex-direction: column;

		.group-tip {
			position: absolute;
			top: 400rpx;
			padding: 50rpx;
			text-align: left;
			line-height: 50rpx;
			color: darkblue;
			font-size: 30rpx;
		}

		.group-items {
			flex: 1;
			padding: 0;
			overflow: hidden;
			position: relative;

			.scroll-bar {
				height: 100%;
			}
		}
	}

	.add-popover {
		display: inline-flex;
		flex-wrap: wrap;
		width: 200rpx;
		height: 160rpx;
		padding: 8rpx 0;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		z-index: 99;
		right: 20rpx;
		top: $im-nav-bar-height;
		border-radius: 10rpx;

		.add-item {
			display: inline-flex;
			width: 100%;
			color: #fff;
			justify-content: center;
			align-items: center;
			height: 80rpx;
		}

		&::after {
			content: '';
			position: absolute;
			top: -18rpx;
			right: 10rpx;
			width: 0;
			height: 0;
			border-left: 18rpx solid transparent;
			border-right: 18rpx solid transparent;
			border-bottom: 18rpx solid rgba(0, 0, 0, 0.6)
		}
	}
</style>